import Page from './demo.vue';
<template>
	<Row>
		<i-col span="16" :offset="4">
			<Row class="flex">
				<i-col span="10" class=" text-center self-center">
					<Avatar :size="100" :src="this.formLeft.avatar"> </Avatar>
					<p class="my-md">
						We recommend an image<br />
						of at least 400x400.Gifs work too.
					</p>
					<div class="flex my-md row center-center ">
						<Upload action="Upload" :before-upload="handleUpload">
							<Button icon="ios-cloud-upload-outline" size="small"
								>上传头像</Button
							>
						</Upload>

						<Upload
							class="mx-sm"
							action="Upload"
							:before-upload="handleBackgroundUpload"
						>
							<Button icon="ios-cloud-upload-outline" size="small"
								>上传个人主页背景图</Button
							>
						</Upload>
					</div>
					<div>
						<img
							class=" w-4xl h-3xl b-0"
							:src="this.formLeft.background"
						/>
					</div>
				</i-col>
				<i-col span="14" class="my-3xl ">
					<i-form
						:model="formLeft"
						label-position="top"
						:label-width="100"
					>
						<FormItem label="昵称">
							<i-input v-model="formLeft.nickName"></i-input>
						</FormItem>
						<FormItem label="自我简介">
							<i-input
								type="textarea"
								v-model="formLeft.selfintro"
							></i-input>
						</FormItem>
						<FormItem label="个人主页">
							<i-input v-model="formLeft.homepage"></i-input>
						</FormItem>
						<FormItem label="邮箱">
							<i-input v-model="formLeft.email"></i-input>
						</FormItem>
						<FormItem class="py-lg">
							<Button
								type="primary"
								@click.native="editInfo"
								shape="circle"
								long
								size="large"
								class="margin"
								>提交
							</Button>
						</FormItem>
					</i-form>
				</i-col>
			</Row>
		</i-col>
	</Row>

	<!-- <el-button @click="create721Token">发行721</el-button> -->
</template>

<script>
import { userUpdateinfo, userinfo, ststoken, getAuthorization } from '@/api';
// import { NETWORKID, CONTRACTBUILD } from '@/config';

import OSS from 'ali-oss';
import { OSSBASEPATH } from '@/config';

export default {
	data() {
		return {
			formLeft: {
				nickName: '',
				selfintro: '',
				homepage: '',
				email: '',
				objData: null,
				background: '',
				avatar: '',
			},
			avatar: '',
			background: '',
		};
	},
	watch: {
		background(val) {
			this.formLeft.background = OSSBASEPATH + '/userInfo/' + val.name;
		},
		avatar(val) {
			this.formLeft.avatar = OSSBASEPATH + '/userInfo/' + val.name;
		},
	},
	methods: {
		async getUserInfo() {
			let res = await userinfo({ lang: 'zh_CN' });
			//   this.$store.commit("user/login", res.data.data);
			localStorage.setItem('UserInfo', JSON.stringify(res.data.data));
		},
		async editInfo() {
			console.log('editInfo test');
			let newInfo = {
				nickname: this.formLeft.nickName,
				avatar: OSSBASEPATH + '/userInfo/' + this.avatar.name,
				background: OSSBASEPATH + '/userInfo/' + this.background.name,
				selfintro: this.formLeft.selfintro,
				homepage: this.formLeft.homepage,
				email: this.formLeft.email,
				lang: 'zh_CN',
			};
			console.log(newInfo);
			let res = await userUpdateinfo(newInfo);
			if (res.status == 200) {
				if (res.data.code == 0) {
					this.$Message.success('更新成功');
					this.getUserInfo();
				} else {
					console.log(res.data.msg);
					this.$Message.error('更新失败！[' + res.data.msg + ']');
				}
			} else {
				this.$Message.error('更新失败！');
			}
		},
		async getStstoken() {
			let res = await ststoken(getAuthorization());
			console.log(res.data.data.SecurityToken);
			let data = res.data.data;
			console.log(data.SecurityToken);
			let client = new OSS({
				accessKeyId: 'LTAI4Fxv55cArEHyaNoK7L7b', //已经替换为+1的（√）
				accessKeySecret: 'fFVmSCAgySqhuVkdHz7nbAbWJ167DW', //需要替换为+1的（x）
				bucket: 'haichain-nfts',
				stsToken: data.SecurityToken,
				secure: true,
			});

			console.log(188, client);
			this.objData = data;
		},
		//上传用户头像
		handleUpload(file) {
			this.avatar = file;
			this.Upload(file);
			return false;
		},
		//上传用户背景图
		handleBackgroundUpload(file) {
			this.background = file;
			this.Upload(file);
			return false;
		},
		//上传文件
		Upload(file) {
			console.log(file);
			let store = new OSS({
				accessKeyId: this.objData.AccessKeyId,
				accessKeySecret: this.objData.AccessKeySecret,
				bucket: 'haichain-nfts',
				stsToken: this.objData.SecurityToken,
				region: 'oss-cn-hangzhou',
				secure: true,
			});
			//let store = new OSS(this.objData);

			store
				.multipartUpload(
					//第一个参数可以设置自定义的路径
					'/userInfo/' + file.name,
					// file.name,
					file,
					{
						//获取进度条的值
						progress: (p) => {
							console.log(p);
						},
					}
				)
				.then(
					//处理成功
					(result) => {
						//处理签名地址
						store.signatureUrl(result.name);
						console.log(result);
					}
				)
				.catch((err) => {
					console.log(err);
				});
		},
	},
	async mounted() {
		console.log(JSON.parse(localStorage.getItem('UserInfo')));
		this.formLeft.nickName = JSON.parse(
			localStorage.getItem('UserInfo')
		).nickname;
		this.formLeft.selfintro = JSON.parse(
			localStorage.getItem('UserInfo')
		).selfintro;
		this.formLeft.homepage = JSON.parse(
			localStorage.getItem('UserInfo')
		).homepage;
		this.formLeft.email = JSON.parse(
			localStorage.getItem('UserInfo')
		).email;
		this.formLeft.background = JSON.parse(
			localStorage.getItem('UserInfo')
		).background;
		this.formLeft.avatar = JSON.parse(
			localStorage.getItem('UserInfo')
		).avatar;
		this.getStstoken();
	},
};
</script>

<style lang="scss">
form {
	.ivu-form-item-label {
		text-align: left !important;
		font-weight: bolder !important;
	}
	.ivu-form-item-content {
		margin-left: 0px !important;
	}
}
</style>
